<template>
	<view class="container">
		<!-- 日期选择模块 -->
		<view class="date-picker">
			<picker mode="date" :value="birthday" :end="maxDate" @change="handleDateChange">
				<view class="date-input">{{ birthday || '选择您的出生日期' }}</view>
			</picker>
		</view>

		<!-- 年龄设定 -->
		<view class="age-selector">
			<text>预期寿命：</text>
			<input type="number" v-model="lifeExpectancy" class="age-input" placeholder="默认80岁" min="1" max="150" />
			<text>岁</text>
		</view>

		<!-- 人生进度条 -->
		<view class="progress-wrapper">

			<!-- // 仅在小程序环境显示 -->
			<!--  #ifdef MP-WEIXIN -->
			<view class="progress-bar" :style="{ width: progress + '%' }"
				:class="{ 'green': Number(progress) <= 50,'warning': Number(progress) >= 50, 'critical': Number(progress) >= 80 }">
				<text class="progress-text">{{ displayProgress }}%</text>
			</view>
			<!-- #endif -->
			<!-- // 仅在小程序环境隐藏 -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- // 添加浏览器前缀以提高兼容性 -->
			<view class="progress-bar" :style="progressStyle"
				:class="{ 'warning': Number(progress) >= 50, 'critical': Number(progress) >= 80 }">
				<text class="progress-text">{{ displayProgress }}%</text>
			</view>
			<!-- #endif -->
			<!-- <view class="progress-bar" :style="progressStyle"
				:class="{ 'warning': numprogress >= 50, 'critical': progress >= 80 }">
				<text class="progress-text">{{ displayProgress }}%</text>
			</view> -->
		</view>

		<!-- 统计信息 -->
		<view class="stats">
			<view class="stat-item">
				<text class="stat-value">{{ livedDays }}</text>
				<text class="stat-label">已活天数</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{ remainingDays }}</text>
				<text class="stat-label">剩余天数</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				birthday: '',
				lifeExpectancy: 80,
				maxDate: ''
			};
		},
		created() {
			this.maxDate = this.getCurrentDate();
		},
		computed: {
			// 核心计算逻辑[6,9](@ref)
			livedDays() {
				if (!this.birthday) return 0;
				const birthDate = Date.parse(this.birthday);
				const today = Date.parse(new Date());
				return Math.floor((today - birthDate) / 86400000);
			},
			remainingDays() {
				return Math.max(this.lifeExpectancy * 365 - this.livedDays, 0);
			},
			progress() {
				if (this.livedDays === 0) return 0;
				return (this.livedDays / (this.lifeExpectancy * 365) * 100).toFixed(1);
			},
			displayProgress() {
				return this.progress || 0;
			},
			progressStyle() {
				return {
					width: `${this.progress}%`,
					// 仅在小程序环境隐藏 
					// #ifndef MP-WEIXIN 
					// 添加浏览器前缀以提高兼容性
					background: `-webkit-linear-gradient(90deg, #4CAF50 ${this.progress}%, #FFC107 100%)`,
					background: `linear-gradient(90deg, #4CAF50 ${this.progress}%, #FFC107 100%)`
					// #endif 
				};
			}
		},
		methods: {
			// 日期处理[6,7](@ref)
			handleDateChange(e) {
				const selectedDate = e.detail.value;
				if (Date.parse(selectedDate) > Date.parse(new Date())) {
					uni.showToast({
						title: '未来尚未到来',
						icon: 'none'
					});
					return;
				}
				this.birthday = selectedDate;
			},
			getCurrentDate() {
				const date = new Date();
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 容器布局[1,10](@ref) */
	.container {
		padding: 40rpx;
		margin: 60rpx auto;
		max-width: 700rpx;
	}

	.date-picker {
		background: #f8f9fa;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;

		.date-input {
			color: #2196F3;
			font-size: 32rpx;
			text-align: center;
			padding: 15rpx;
			border-bottom: 2rpx solid #64B5F6;
		}
	}

	.age-selector {
		display: flex;
		align-items: center;
		margin: 30rpx 0;

		.age-input {
			border: 1rpx solid #BBDEFB;
			border-radius: 8rpx;
			padding: 10rpx 20rpx;
			margin: 0 15rpx;
			width: 120rpx;
			text-align: center;
		}
	}

	.progress-wrapper {
		height: 36rpx;
		background: #E0E0E0;
		border-radius: 18rpx;
		overflow: hidden;
		position: relative;
		margin: 40rpx 0;

		.progress-bar {
			height: 100%;
			transition: width 0.5s ease;

			&.green {
				// 确保高优先级样式
				background: #4CAF50 !important;
			}

			&.warning {
				// 确保高优先级样式
				background: #FFC107 !important;
			}

			&.critical {
				// 确保高优先级样式
				background: #F44336 !important;
			}
		}

		.progress-text {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #fff;
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
		}
	}

	.stats {
		display: flex;
		justify-content: space-around;
		margin-top: 60rpx;

		.stat-item {
			text-align: center;

			.stat-value {
				display: block;
				font-size: 48rpx;
				color: #2196F3;
				font-weight: bold;
			}

			.stat-label {
				color: #757575;
				font-size: 28rpx;
			}
		}
	}
</style>